{{style_or_link}}



<div class="container" data-{{uuid}}>
    <svg class="chart" data-{{uuid}}></svg>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/d3/6.7.0/d3.min.js"></script>
<script>
    const xPorname = '{{x_field_name}}'
    const yPorname = '{{y_field_name}}'

    const data = {{ df }}

    const svg = d3.select('svg.chart')
    const svgRect = svg.node().getBoundingClientRect()
    const x = d3.scaleBand()
        .domain(data.map(v => v[xPorname]))
        .range([0, svgRect.width])
        .padding(0.2)

    const y = d3.scaleLinear().domain([0, d3.max(data.map(v => v[yPorname]))]).range([svgRect.height, 0])

    svg.append('g').attr('class', 'x-axis')
        .attr('transform', `translate(0,${svgRect.height})`)
        .call(d3.axisBottom(x))

    svg.append('g').attr('class', 'y-axis')
        .call(d3.axisLeft(y))

    svg.append('g').attr('class', 'data')
        .selectAll('.bar').data(data).join('rect')
        .attr('class', 'bar')
        .attr('x', d => x(d.x))
        .attr('y', d => y(d.y))
        .attr('height', d => svgRect.height - y(d.y))
        .attr('width', d => x.bandwidth())
</script>